<template>
  <div>
    <!-- 搜索框 -->
    <div style="padding: 10px 0">
      <el-input style="width: 200px" suffix-icon="el-icon-search" placeholder="请输入病人姓名" v-model="pname"></el-input>
      <el-button style="margin-left: 8px" type="primary" @click="search">搜索</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>

    <!-- 功能模块 -->
    <div style="margin: 10px 0">
      <el-button type="primary" @click="handleAdd">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
      <el-button type="danger" @click="delBatch">批量删除 <i class="el-icon-remove-outline"></i></el-button>
    </div>

    <el-table :data="tableData" border stripe @selection-change="handleSelectionChange" v-loading="loading">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column prop="pid" label="ID">
      </el-table-column>
      <el-table-column prop="pname" label="病人姓名">
      </el-table-column>
      <el-table-column prop="pgender" label="病人性别">
      </el-table-column>
      <el-table-column prop="page" label="病人年龄">
      </el-table-column>
      <el-table-column prop="status" label="是否康复">
        <template v-slot="scope">
          <el-switch v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949" @change="changeEnable(scope.row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="pblood" label="病人血型">
      </el-table-column>
      <el-table-column prop="pdiagnostic" label="病人症状">
      </el-table-column>
      <el-table-column prop="room" label="病房地址">
      </el-table-column>
      <el-table-column prop="doctor" label="所属医生">
      </el-table-column>
      <el-table-column prop="sector" label="所在科室">
      </el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template v-slot="scope">
          <el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页功能 -->
    <div style="padding: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
    <!-- 新增修改信息对话框 -->
    <el-dialog title="病人信息" :visible.sync="dialogFormVisible" width="30%">
      <el-form label-width="80px" size="small">
        <el-form-item label="病人姓名">
          <el-input v-model="form.pname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="病人性别">
          <el-input v-model="form.pgender" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="病人年龄">
          <el-input v-model="form.page" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否康复">
            <el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </el-form-item>
        <el-form-item label="病人血型">
          <el-input v-model="form.pblood" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="病人症状">
          <el-input v-model="form.pdiagnostic" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="病房地址">
          <el-select v-model="form.sickroomid" placeholder="请选择病房" clearable style="width: 100%">
            <el-option v-for="item in rooms" :key="item.id":label="item.saddr" :value="item.sid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在科室">
          <el-select v-model="form.sectorid" placeholder="请选择科室" clearable style="width: 100%">
            <el-option v-for="item in sectors" :key="item.id":label="item.sname" :value="item.sid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属医生">
          <el-select v-model="form.doctorid" placeholder="请选择医生" clearable style="width: 100%">
            <el-option v-for="item in doctors" :key="item.id":label="item.dname" :value="item.did"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Patient",
  data() {
    return{
      loading: false,
      pname: "",
      form: {
        sickroomid: ''
      },
      dialogFormVisible: false,
      tableData: [],
      pageNum: 1,
      pageSize: 10  ,
      total: 0,
      sectors: [],
      multipleSelection: [],
      doctors: [],
      rooms: [],
      oldRoomId: ""
    }
  },
  created() {
    this.load()
    // 查询所有科室信息
    this.request.get("/sector/").then( res => {
      this.sectors = res.data
    })
    // 查询所有医生信息
    this.request.get("/doctor/").then( res => {
      this.doctors = res.data
    })
    // 查询所有房间信息
    this.request.get("/room/").then( res => {
      this.rooms = res.data
    })
  },
  watch: {
    'form.sickroomid': {
      handler(newVal, oldVal) {
        this.oldRoomId = oldVal
      },
      deep: true
    },
  },
  methods: {
    reset() {
      this.pname = ''
      this.load()
    },
    save() {
      this.request.post(`/patient/add/${this.oldRoomId}`, this.form ).then(res => {
        if(res.code === '200') {
          this.$message.success("保存成功")
          this.dialogFormVisible = false
          this.load()
        }else {
          this.$message.error(res.msg)
          this.dialogFormVisible = false
        }
      })
    },
    changeEnable(row) {
      this.request.post("/patient/update", row).then(res => {
        if (res.code === '200' && row.status === true) {
          this.$message.success("已康复")
        } else {
          this.$message.warning("该病人还待观察")
        }
      })
    },
    delBatch() {
      this.$confirm('您确定要删除这些记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发送删除请求
        let ids = this.multipleSelection.map(v => v.pid)  // [{}, {}, {}] => [1,2,3]
        this.request.post("/patient/del/batch", ids).then(res => {
          if (res.code === '200') {
            this.$message.success("批量删除成功")
            this.load()
          } else {
            this.$message.error("批量删除失败")
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    exp() {
      window.open("http://localhost:8081/doctor/export")
    },
    del(row) {
      this.$confirm('您确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.request.get("/patient/" + row.pid).then(res => {
          if(res.code === '200') {
            this.$message.success("删除成功")
            this.load()
          } else {
            this.$message.error("删除失败")
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleAdd() {
      this.dialogFormVisible = true
      this.form = {}
    },
    handleEdit(row) {
      this.form = row
      this.dialogFormVisible = true
    },
    search() {
      this.load()
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.load()
    },
    load() {
      // 请求分页查询数据
      this.loading = true
      setTimeout(() => {
        this.loading = false
        this.request.get(`/patient/page`, {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            pname: this.pname
          }
        }).then(res => {
          this.tableData = res.data.records
          this.total = res.data.total
        })
      }, 500)
    }
  }
}
</script>

<style scoped>

</style>